HTML - tags - source tag

revision: December 8, 2025

Content

"source" tag : specifies multiple resources for media elements

The <source> tag is used to specify multiple media resources for media elements, such as <video>, <audio>, and <picture>. The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width. The browser will choose the first <source> it supports.

Attributes: the <source> element supports the global attributes and events attributes.Specific attributes are:

media ;value: media_query;

accepts any valid media query that would normally be defined in a CSS.

size ; value: ;

specifies image sizes for different page layouts.

src ; value: URL; required when "source" is used in "audio" and "video";

specifies the URL of the media file.

srcset ; value: URL; required when 'source' is used in 'picture';

specifies the URL of the image to use in different situations.

type ; value: MIME-type;

specifies the MIME-type of the resource.

syntax

<source . . . .>

some examples

                ​    <audio controls>
                        <source src="../../pics/horse.wav" type="audio/wav">
                        <source src="../../pics/horse.mp3" type="audio/mpeg">
                        Your browser does not support the audio element.
                    </audio>
                

                    <video style="margin-left:4vw;" width="320" height="240" controls>
                        <source src="../../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
                        <source src="../../pics/Wuzhen-20-10_02.ogg" type="video/ogg">
                        Your browser does not support the video tag.
                    </video>